@import '~@/assets/css/mixins/border-active-logo.scss';
.cloud-app-container {
  width: 1200px;
  margin: 0 auto;
  .form-item-title {
    color: #313238;
    font-size: 14px;
    font-weight: 600;
  }
  .from-content {
    background: #ffffff;
    box-shadow: 0 2px 4px 0 #1919290d;
    border-radius: 2px;
    padding: 12px 24px;
  }
  .form-item-cls {
    /deep/ .bk-label {
      width: 100px !important;
    }
    .code-depot {
      .on {
        border: solid 2px #3a84ff;
        padding: 0 16px 0 14px;
        background-color: #fff;
        color: #3a84ff;

        @include border-active-logo;
      }
    }
    .code-depot-item {
      width: 145px;
      height: 100px;
      background: #f0f1f5;
      border-radius: 2px;
      text-align: center;
      position: relative;
      cursor: pointer;
      img {
        width: 40px;
        height: 36px;
        margin: 12px 0 6px 0;
      }
    }
    .source-control-title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .form-input-width {
    width: 650px;
  }

  .form-btn {
    margin-left: 100px;
    margin-top: 20px;
  }

  .form-text-append {
    color: #3a84ff !important;
    background: #fafbfd;
    border-radius: 0 2px 2px 0;
    cursor: pointer;
    line-height: 30px;
  }

  .step-cls {
    width: 400px;
    margin: 20px auto 0;
  }
  .languages-card {
    background: #fafbfd;
    border-radius: 2px;
    width: 940px;
    padding: 20px 20px 0 20px;
    margin: 20px 0 0 100px;
    .languages-name {
      color: #63656e;
    }
    .languages-desc {
      color: #979ba5;
      font-size: 12px;
    }
  }
}
.build-info {
  margin-right: 110px;
  color: #3a84ff;
  cursor: pointer;
}
.build-text {
  color: #313238;
}
.config-item {
  position: relative;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.build-params-form {
  margin-top: 20px;
  margin-bottom: 16px;
  display: flex;

  .form-label {
    width: 100px;
    line-height: 32px;
    padding-right: 24px;
    text-align: right;
  }

  .form-value-wrapper {
    line-height: 32px;
    width: 100%;
    flex: 1;

    .bk-form {
      flex: 1;
    }

    .bk-form-item {
      margin-top: 0 !important;
    }
  }
}

.build-params-header {
  width: 650px;
  display: flex;
  line-height: 32px;
  .name,
  .value {
    flex: 1;
  }
  .value {
    margin-right: -5px;
  }
}

.build-params-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 650px;

  &:last-child {
    margin-bottom: 0;
  }

  .equal {
    font-weight: 700;
    font-size: 14px;
    color: #ff9c01;
    margin: 0 11px;
  }

  i {
    margin-left: 12px;
    color: #ea3636;
    cursor: pointer;
  }
}

.add-build-params {
  margin-left: 100px;
}

.form-dockerfile-cls {
  transform: translateX(-19px);
  /deep/ .bk-label {
    width: 119px !important;
  }
}

.lesscode-info {
  margin-left: 100px;
  width: 56%;
  font-size: 12px;
}

.tab-container{
  .tab-item{
    margin-right: 10px;
    width: 144px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #f0f1f5;
    border-radius: 2px;
    font-size: 14px;
    color: #63656e;
    cursor: pointer;
    position: relative;
  }
  .template{
    width: 200px;
    height: 48px;
    line-height: 48px;
  }
  .active{
    background: #fff;
    border: 2px solid #3a84ff;
    border-radius: 2px;
    color: #3a84ff;
    @include border-active-logo;
  }
}
.plugin-container{
  background: #FAFBFD;
  padding: 20px;
  margin-left: 100px;

  .plugin-item {
    margin-top: 16px;

    &:first-child {
      margin-top: 0;
    }
    .f12 {
      color: #979ba5;
    }
  }
}
.construction-manner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .bk-form-radio {
    display: flex;
    align-items: center;
  }

  .bk-form-radio + .bk-form-radio {
    margin-top: 15px;
    margin-left: 0;
  }
  .tips {
    margin-left: 12px;
    font-size: 12px;
    color: #979ba5;
    i {
      font-size: 14px !important;
    }
  }
}
